import React, { Component } from 'react';
import {Button, Card, Input, Table} from 'antd';
import * as echarts from 'echarts';
import { ResultData } from '@/services/A10/ResultController';
import Search from "antd/es/input/Search";
import Compact from "antd/es/space/Compact";

class ExamplePage extends Component {

  state = {
    columns: [],
    TableData: [],
    Piedata: [
      { value: 1048, name: '0' },
      { value: 735, name: '1' },
      { value: 580, name: '2' },
      { value: 484, name: '3' },
      { value: 300, name: '4' },
      { value: 800, name: '5' },
    ],
    initSearchParams: {},
    inputValue: '', // 保存输入框的值
  };

  async componentDidMount() {
    const columns = [
      {
        title: '样本ID',
        dataIndex: 'id',
        width: 150,
      },
      {
        title: '分类',
        dataIndex: 'value',
        width: 150,
      },
    ];
    const params = new URLSearchParams(window.location.search);
    const name = params.get('name');
    const url = params.get('url');
    let initSearchParams ={}
    if(name==null){
      initSearchParams = {
        name: "(展示数据)",
      };
    }else {
      initSearchParams = {
        name: name,
        url : url
      };
    }

    if (name != null) {
      const resp = await ResultData(initSearchParams);
      const TableData = Object.entries(resp.data.data).map(([id, value]) => ({ id, value }));
      const Piedata = resp.data.arr.map((value, index) => ({
        value: value,
        name: String(index),
      }));
      this.setState({ Piedata });
      this.setState({ columns });
      this.setState({ TableData });
    }
    this.setState({ initSearchParams });
    this.drawBarChart();
  }

  drawBarChart() {
    const ChartDom = document.getElementById('Chart');
    const option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '15%',
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: true,
            formatter(param) {
              return `{b|${param.name}}\n${param.value} (${param.percent * 2}%)`;
            },
            rich: {
              b: {
                align: 'center',
                fontWeight: 'bold',
                fontSize: 20,
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 25,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: true,
          },
          data: this.state.Piedata,
        },
      ],
    };
    const chart = echarts.init(ChartDom);
    chart.setOption(option);
  }
  selectID(){
    if(!this.state.inputValue){
      ResultData(initSearchParams);
      const TableData = Object.entries(resp.data.data).map(([id, value]) => ({ id, value }));
    }
    let targetValue = [];
    for (const [id, value] of Object.entries(this.state.TableData)) {
      if (id === this.state.inputValue) {
        targetValue.push({ id, value });
        break;
      }
    }
    // 更新状态
    this.setState({
      TableData: targetValue,
    });
    console.log(targetValue);
  }

  handleInputChange = (value) => {
    this.setState({ inputValue: value }); // 更新输入框的值
  };
  render() {
    const { columns, TableData, initSearchParams } = this.state;

    return (
      <div>
        <Card title={initSearchParams.name + ' 可视化图表'} style={{ marginBottom: '20px' }}>
          <div id="Chart" style={{ height: '350px', marginTop: '-50px' }}></div>
        </Card>

        <Card>
          {/*<Compact
          >
            <Input placeholder="输入请要查找的样品ID" onChange={(event) => this.handleInputChange(event.target.value)}/>
            <Button type="primary" style={{ borderRadius:'6px'}} onClick={()=>this.selectID()}>搜索</Button>
          </Compact>*/}
          <Table
            columns={columns}
            dataSource={TableData}
            scroll={{
              y: 240,
            }}
          />
        </Card>

      </div>
    );
  }
}
export default ExamplePage;
